<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - Layui</title>
  <style>
    .center-wrapper {
      display: flex;
      justify-content: center;
    }
    .custom-input {
      font-size: 20px;
    }

  </style>

  <!-- 引入 layui.css -->
  <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
</head>
<body>

<div class="layui-container">
  <div class="layui-progress" style="margin: 15px 0 30px;">
    <div class="layui-progress-bar" lay-percent="100%"></div>
  </div>
  
  
  <blockquote class="layui-elem-quote" style="margin-top: 30px;">
    <div class="layui-text">
      <ul>
        <li>这是一个很棒的漏洞Fuzzy Matching系统</li>
        <li>想了解更多漏洞信息，欢迎咨询 (<a href="https://poe.com/ChatGPT" target="_blank">Poe.ChatGPT</a>)</li>
        <li>开发者: <a href="https://april17-1.github.io/" target="_blank">Apirl</a></li>
      </ul>
    </div>
  </blockquote>
</div>

<div class="center-wrapper">
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-search" style="font-size: 40px; height: 60px;"></i>
      </div>
      <form id="search-form" action="/search" method="get">
        <input id="search-input" type="text" type="text" name="query" maxlength="100" placeholder="输入需要查询的漏洞名称" class="layui-input custom-input" style="width: 450px; height: 60px;">
        <div class="layui-input-suffix">
          <button class="layui-btn layui-btn-primary custom-input" style="height: 60px; margin-left: 30px;" type="submit">
            <span style="font-size: 25px;font-weight: bold;">搜索</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<table class="layui-hide" id="ID-table-demo-parse"></table>
  



<script>
  document.getElementById("search-form").addEventListener("submit", function(event) {
    var input = document.getElementById("search-input");
    if (input.value.length > 100) {
      alert("输入的字符数超过限制，请重新输入！");
      event.preventDefault(); // 阻止提交表单
    }
  });
</script>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.8/dist/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 渲染
  table.render({
    elem: '#ID-table-demo-parse',
    url: '/static/json/2/table/demo3.json', 
    page: true,
    response: {
      statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
    },
    // 将原始数据解析成 table 组件所规定的数据格式
    parseData: function(res){
      return {
        "code": res.status, //解析接口状态
        "msg": res.message, //解析提示文本
        "count": res.total, //解析数据长度
        "data": res.rows.item //解析数据列表
      };
    },
    cols: [[
      {field:'hazardLevel', title:'hazardLevel', width:130, fixed: 'left', unresize: true, sort: true},
      {field:'vulName', title:'vulName', width:150},
      {field:'cnnvd/cveCode', title:'同名CNNVD-CVE', width:150},
      {field:'vulTypeName', title:'vulTypeName', width:150, sort: true},
      {field:'affectedVendor', title:'affectedVendor', width:160, sort: true},
      {field:'vulDesc', title:'vulDesc'},
      {field:'referUrl', title:'referUrl', width:300}
    ]],
    height: 400,
  });
});
</script>









































<!-- body 末尾处引入 layui -->
</body>
</html>
